<script lang="ts" setup>
import { reactive } from 'vue'
import useLocale from '@/hooks/locale'
import useAppStore from '@/store/modules/app'

const { changeLocale } = useLocale()
const appStore = useAppStore()
const localeOptions = reactive([
  { value: 'zh-CN', label: '中文' },
  { value: 'en-US', label: 'English' },
])
function handleChange(val: 'zh-CN' | 'en-US') {
  changeLocale(val)
  appStore.changeLanguage(val)
}
</script>

<template>
  <el-dropdown popper-class="no-focus-border" @command="handleChange">
    <div class="language-text flex-center-all">
      {{ $t('Language', '中文') }}<el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in localeOptions" :key="item.value" :command="item.value">
          {{ $t(item.label) }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.language-text {
  &:hover {
    background-color: antiquewhite;
    border: none;
  }
}

.no-focus-border:focus-visible {
  outline: none;
}

:deep(.el-dropdown:focus-visible) {
  outline: none !important;
}
</style>
